<!DOCTYPE HTML>
<html>
<head>
	<title>pixi.js example 15 - Filters</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}
	</style>
	
	<script src="../../bin/pixi.dev.js"></script>
	<!--<script src="pixi.js"></script>-->
</head>
<body>
	<script>
	
	var renderer = PIXI.autoDetectRenderer(630, 410);
	
	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0xFFFFFF, true);
	
	stage.interactive = true;
	
	var bg = PIXI.Sprite.fromImage("depth_blur_BG.jpg");
	stage.addChild(bg);

	var littleDudes = PIXI.Sprite.fromImage("depth_blur_dudes.jpg");
	littleDudes.position.y = 100;
	stage.addChild(littleDudes);

	var littleRobot = PIXI.Sprite.fromImage("depth_blur_moby.jpg");
	littleRobot.position.x = 120;
	stage.addChild(littleRobot);

	var blurFilter1 = new PIXI.BlurFilter();
	var blurFilter2 = new PIXI.BlurFilter();
	
	littleDudes.filters = [blurFilter1];
	littleRobot.filters = [blurFilter2];

	renderer.view.style.position = "absolute"
	renderer.view.style.width = window.innerWidth + "px";
	renderer.view.style.height = window.innerHeight + "px";
	renderer.view.style.display = "block";
	
	// add render view to DOM
	document.body.appendChild(renderer.view);
	
	
	
	var count = 0;
	var switchy = false;
	
	stage.click = stage.tap = function()
	{
		switchy = !switchy
		
		if(!switchy)
		{
			//stage.filters = [filter];
		}
		else
		{
		//	stage.filters = null;
		}
		
	}
	
	/*
	 * Add a pixi Logo!
	 */
	var logo = PIXI.Sprite.fromImage("../../logo_small.png")
	stage.addChild(logo);
	
	logo.anchor.x = 1;
	logo.anchor.y = 1;

	logo.position.x = 630
	logo.scale.x = logo.scale.y = 0.5;
	logo.position.y = 400;
	logo.interactive = true;
	logo.buttonMode = true;
	
	logo.click = logo.tap = function()
	{
		window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
	}
	
	
	requestAnimFrame(animate);

	function animate() {
		
		count += 0.01;
		
		var blurAmount = Math.cos(count) ;
		var blurAmount2 = Math.sin(count) ;


		blurFilter1.blur = 20 * (blurAmount);
		blurFilter2.blur = 20 * (blurAmount2);
	    renderer.render(stage);
	    requestAnimFrame( animate );
	}

	</script>

	</body>
</html>
